<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <eleFrorm
      ref="baseForm"
      :slotShow="false"
      :form-data="searchFormData"
      :form-columns="searchFormColumns"
      :form-rules="formRules"
      label-width="120px"
    >
    </eleFrorm>
    <div>
      <el-button
        type="primary"
        plain
        @click="openForm('create')"
        v-hasPermi="['project:baseData:create']"
      >
        <Icon icon="ep:plus" class="mr-5px"/>
        新增
      </el-button>
      <el-button @click="onSubmit">
        <Icon icon="ep:search" class="mr-5px"/>
        搜索
      </el-button>
      <el-button @click="onReset">
        <Icon icon="ep:refresh" class="mr-5px"/>
        重置
      </el-button>
    </div>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <MyTable
      ref="xmwTableRef"
      :table-data="state.data"
      :loading="state.loading"
      :columns="tableColumns"
      :table-config="tableConfig"
      :pagination-config="pageConfig"
      max-height="500"
      stripe
      show-seletion
      border
      @index-method="indexMethod"
      @page-size-change="pageSizeChange"
      @current-page-change="currentPageChange"
      @multi-selection="multiSelection"
      @row-click="rowClick"
    >
      <template #handler="{ scope }">
        <el-button
          link
          type="primary"
          size="small"
          @click="openForm('update', scope.row.id)"
          v-hasPermi="['project:baseData:update']"
        >编辑
        </el-button
        >
        <el-button
          link
          type="primary"
          size="small"
          @click="handleDelete(scope.row.id)"
          v-hasPermi="['project:baseData:delete']"
        >删除
        </el-button
        >
      </template>
    </MyTable>
  </ContentWrap>
  <!-- 表单弹窗：添加/修改 -->
  <AuthFrom ref="formRef" @success="getList"/>
</template>

<script setup lang="ts">
import {DICT_TYPE, getIntDictOptions} from '@/utils/dict'
import download from '@/utils/download'
import * as ProjectAuthApi from '@/api/project/auth'
import AuthFrom from './AuthFrom.vue'
import AuthImportForm from './AuthImportForm.vue'

import eleFrorm from '@/components/MyForm/index.vue'
import MyTable from '@/components/MyTable/index.vue'
import {searchFormData, searchFormColumns, formRules, tableColumns, tableConfig} from './data'

defineOptions({name: 'ProjectBaseData'})

// 将表单绑定的ref暴露给父组件
const baseForm = ref<any>(null)
// 重置表单操作
const onReset = () => {
  baseForm.value.formReset()
  getList()
}
// 提交表单操作
const onSubmit = async () => {
  let isValidate = await baseForm.value.formSubmit()
  if (isValidate) {
    getList()
  }
  console.log(isValidate, 'isValidate');
}

/******************************* MyTable*********************************************/
const MyTableRef = ref<HTMLElement | null>(null) // 表格ref
const state = reactive<any>({
  data: [],
  loading: false
})
const pageConfig = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  small: true,
  background: true
})

// 编辑操作
function handlerEdit(row: any) {
  console.log(row)
}

// 删除操作
function handlerDelect(row: any) {
  console.log(row)
}

// 自定义索引
function indexMethod(index: number) {
  return index * 5
}

// 切换分页
function pageSizeChange(pageSize: number) {
  pageConfig.current = 1
  pageConfig.pageSize = pageSize
  getList()
}

function currentPageChange(pageIndex: number) {
  pageConfig.current = pageIndex
  getList()
}

// 批量删除
function batchDelete(selection: any) {
  console.log(selection)
}

// 批量导出
function batchExport(selection: any) {
  console.log(selection)
}

// 清除多选
function clearSelection(selection: any) {
  console.log(MyTableRef.value)
  // @ts-ignore
  MyTableRef.value.clearSelection()
}

// 多选选中时触发
function multiSelection(selection: any) {
  console.log(selection)
}

// 行点击事件 测试事件绑定
function rowClick(row: any) {
  console.log(row)
}

/** 查询列表 */
const loading = ref(true) // 列表的加载中
const getList = async () => {
  loading.value = true
  try {
    const queryParams = {
      pageNo: pageConfig.current,
      pageSize: pageConfig.pageSize, ...searchFormData
    }
    const data = await ProjectAuthApi.getAuthPage(queryParams)

    state.data = data.list
    pageConfig.total = data.total
  } finally {
    loading.value = false
  }
}

const message = useMessage() // 消息弹窗
const {t} = useI18n() // 国际化


const exportLoading = ref(false) // 导出的加载中


/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await ProjectAuthApi.deleteAuth(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {
  }
}

/** 基础数据导入 */
const importFormRef = ref()

const handleImport = () => {
  importFormRef.value.open()
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const queryParams = {
      pageNo: pageConfig.current,
      pageSize: pageConfig.pageSize, ...searchFormData
    }
    const data = await ProjectAuthApi.exportAuth(queryParams)
    download.excel(data, '项目.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}

/** 初始化 **/
onMounted(() => {
  getList()
  console.log(getIntDictOptions(DICT_TYPE.USER_TYPE))
})
</script>
